<template>
	<view class="container">
		<NavBar :title="title"/>
		<swiper
			class="swiper"
			:autoplay="false"
			@animationfinish="handleChange">
			<swiper-item
				v-for="(item, index) in data"
				:key="index">
				<view class="swiper-content">
					<view class="lego-card">
						<view class="topbar">
							<view class="topbar-type">
								<u-tag :text="item.type.name"></u-tag>
							</view>
							<view>
								<text class="top-index">{{index + 1}}</text>
								<text>/{{pageSize}}</text>
							</view>
						</view>
						<u-line></u-line>
						<Question
							:code="item.code"
							:result="item.result.code"
							:type="item.type.code"
							:content="item.name"
							:questionList="item.questionList"
							:answerList="item.answerList"
							:correctAnswerList="item.correctAnswerList"
							@submit="handleSubmit"/>
					</view>
					<AnswerStatus
						:type="item.type.code"
						:result="item.result.code"
						:answerList="item.answerList"
						:correctAnswerList="item.correctAnswerList"
						:analyse="item.analyse"/>
				</view>
			</swiper-item>
		</swiper>
		<view>
			<Tabbar
				:successCount="successCount"
				:errorCount="errorCount"
				:collect="collect"
				:pageNo="pageNo"
				@collect="handleCollect"
				@showList="visible = !visible"></Tabbar>
		</view>
	</view>
</template>

<script>
import Tabbar from './components/tabbar'
import Question from './components/question'
import AnswerStatus from './components/answerStatus'
import AnswerAnalyse from './components/answerAnalyse'
export default {
	components: {
		Tabbar,
		Question,
		AnswerStatus,
		AnswerAnalyse
	},
	onLoad(data) {
		this.title = data.name
		this.collect = this.data[0].collect
	},
	data() {
		return {
			title: '',
			visible: false,
			collect: false,
			pageIndex: 0,
			successCount: 0,
			errorCount: 0,
			pageSize: 4,
			data: [
				{
					code: '1',
					type: { code: 'question', name: '问答题' },
					name: '微信支付宝对接',
					result: { code: '' },
					analyse: '这个是一个解析'
				},
				{
					code: '2',
					collect: false,
					type: { code: 'single', name: '单选题' },
					result: { code: '' },
					name: 'BOSS系统的综合评估',
					questionList: [{code: 'A', name: 'Hello World'}, {code: 'B', name: 'Hello Java'}, {code: 'C', name: 'Hello Python'}],
					correctAnswerList: ['A'],
					analyse: '这个是两个解析'
				},
				{
					code: '3',
					type: { code: 'multiple', name: '多选题' },
					result: { code: '' },
					name: '小程序的开发',
					questionList: [{code: 'A', name: 'Hello World'}, {code: 'B', name: 'Hello Java'}, {code: 'C', name: 'Hello Python'}],
					correctAnswerList: ['A', 'B'],
					analyse: '这个是三个解析'
				},
				{
					code: '4',
					type: { code: 'multiple', name: '多选题' },
					result: { code: '' },
					name: 'Uniapp的开发',
					questionList: [{code: 'A', name: 'Hello World'}, {code: 'B', name: 'Hello Java'}, {code: 'C', name: 'Hello Python'}],
					correctAnswerList: ['A', 'C'],
					analyse: '这个是三个解析'
				}
			]
		};
	},
	computed: {
		pageNo() {
			return (this.pageIndex + 1) + '/' + this.pageSize
		}
	},
	methods: {
		handleChange(event) {
			this.pageIndex = event.detail.current
			this.collect = this.data[event.detail.current].collect
			if (this.pageIndex + 1 == this.pageSize) {
				this.$toast('已经是最后一题啦！')
				return
			}
			if ((this.pageIndex + 1) == this.data.length && this.data.length < this.pageSize) {
			}
		},
		handleCollect() {
			this.collect = !this.collect
			this.data[this.pageIndex].collect = this.collect
			if (this.collect) {
				this.$toast('收藏成功')
			}
		},
		handleSubmit(data) {
			const item = this.data.find(item => item.code === data.code)
			if (item) {
				item.answerList = data.values
				if (item.type.code === 'question') {
					item.result.code = 'correct'
					return
				}
				if (item.correctAnswerList.every(val => data.values.includes(val))) {
					item.result.code = 'correct'
				} else {
					item.result.code = 'error'
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.swiper {
		flex: 1;
	}
	.swiper-content {
		height: 100%;
		overflow-y: auto;
	}
	.topbar {
		display: flex;
		padding: 10rpx 20rpx 20rpx 0rpx;
	}
	.topbar-type {
		flex: 1;
		display: flex;
	}
	.top-index {
		color: $uni-color-primary;
		font-size: 36rpx;
	}
</style>